<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="css/platform-1.css">
  <!--  <link rel="stylesheet" href="js/easyform/easyform.css">-->
    <link rel="stylesheet" href="css/tab.css">
    <script src="js/jquery-2.1.0.min.js"></script>
    <!--<script src="js/easyform/easyform.js"></script>-->
    <style>
        a{
            text-decoration:none;
        }
    </style>
    <script type="text/javascript">

    </script>
</head>

<body>
<div class="page">

    <div class="header">
        <h2>用户注册</h2>
        <br>
    </div>

    <div class="form-div">
        <form id="reg-form" action="InsertUserServlet" method="post">

            <table>
                <tr>
                    <td>用户名</td>
                    <td><input name="uid" type="text" id="uid"
                               data-easyform="length:4 16;char-normal;real-time;ajax:ajax_demo(1);"
                               data-message="用户名必须为4—16位的英文字母或数字"
                               data-easytip="position:top;class:easy-blue;" data-message-ajax="用户名已存在!">
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input name="psw1" type="password" id="psw1" data-easyform="length:6 16;"
                               data-message="密码必须为6—16位"
                               data-easytip="class:easy-blue;"></td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td><input name="psw2" type="password" id="psw2" data-easyform="length:6 16;equal:#psw1;"
                               data-message="两次密码输入要一致" data-easytip="class:easy-blue;" onblur='validate()'></td>
                </tr>
                <tr>
                    <td>手机号</td>
                    <td><input name="phone" type="text" id="phone"
                               data-message="手机格式要正确"
                               data-easytip="class:easy-blue;"></td>
                </tr>
                <tr>
                    <td>家庭住址</td>
                    <td><input name="address" type="text" id="address"
                               data-message="地址不可为空"
                               data-easytip="class:easy-blue;position:bottom;"></td>
                </tr>
                <tr>
                    <td colspan="2">
                           <span id="xianshi" style="color: red;display: none"></span>
                    </td>
                </tr>
            </table>

            <div class="buttons" style="margin-top: 50px;">
                <input value="注 册" type="submit" style="margin-right:20px; margin-top:20px;">
                <a href="login.html"><input value="我有账号，我要登录" type="button" style="margin-right:45px; margin-top:20px;"></a>
            </div>

            <br class="clear">
        </form>
    </div>


</div>
<script>
   function validate() {
       var pwd1 = $("#psw1").val();
       var pwd2 = $("#psw2").val();
       if (pwd1 != pwd2){
           alert("两次密码输入不一致，请重新输入");
       }

   }


</script>

    <script>

       /* $(document).ready(function ()
        {
            var v = $('#reg-form').easyform();

            $('#demo-form').easyform();

            v.is_submit = false;

            v.error = function (ef, i, r)
            {
                //console.log("Error事件：" + i.id + "对象的值不符合" + r + "规则");
            };

            v.success = function (ef)
            {
                //console.log("成功");
            };

            v.complete = function (ef)
            {
                console.log("完成");
            };

            $('#tip-test1').easytip();
            $('#tip-test2').easytip();
            $('#tip-test3').easytip();
            $('#tip-test4').easytip();


        });

        function ajax_demo(p)
        {
            $("#uid").trigger("easyform-ajax", true);
        }*/

        $(function () {
            $("#uid").blur(function () {
                $.ajax({
                    url:"/before/UserNameServlet",
                    type:"GET",
                    data:{uid:$("#uid").val()},
                    success:function (data) {
                        console.log(data);
                        if (data=="true"){
                            $("#xianshi").html("该账号已经被注册过了").css("display","block");
                        }else {
                            $("#xianshi").html("赶快抢购你的账号然后下单吧").css("display","block");
                        }
                    }
                })
            })
        })
    </script>


</body>

</html>